<template>
    <div class="container">
        <div class="main">
            <div class="headline">
                <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="">
                <div>赤兔养车</div>
            </div>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="auto"
                class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" :prefix-icon="User" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" />
                </el-form-item>

                <el-form-item>
                    <!-- <el-button type="primary" @click="login1(ruleFormRef)">登录</el-button>
                    <el-button @click="">注册</el-button> -->
                    <el-button type="primary" style="width: 100%;" @click="login1(ruleFormRef)">立即登录</el-button>
                    <router-link to="/reg" class="router-test">
                        <p style="color: #3f9eff;">还没有账号？立即注册</p>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, ElNotification } from 'element-plus'
import { Avatar, User, Lock } from "@element-plus/icons-vue";
import { login } from '../apis/user'
import { router } from '../configs/router';
import { useInfoStore } from '../store';

const userInfo = useInfoStore()

const ruleFormRef = ref<FormInstance>();
const rules = {
    username: { required: true, message: '请输入用户名', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
}

const ruleForm = reactive({
    username: '',
    password: '',
})

const login1 = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid) => {
        if (valid) {
            console.log(ruleForm);
            const a = `username=${ruleForm.username}&password=${ruleForm.password}&`
            const res = await login(a)

            const { token, user, roles } = res.data;
            localStorage.token = token;
            localStorage.user = JSON.stringify(user);
            localStorage.roles = JSON.stringify(roles);

            //状态机
            userInfo.photoPath = user.avatar;
            
            // ElMessage.success("登录成功");
            setTimeout(() => {
                router.push("/system/home");
                open1();
            }, 500);
        } else {
            ElMessage.error("您没有输入内容");
        }
    })
}
const open1 = () => {
    ElNotification({
        title: '登录成功',
        message: '欢迎使用赤兔养车🎉',
        type: 'success',
    })
}

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    background: #f0f2f5 url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg) no-repeat center 110px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.main {
    width: 30%;
    margin: 30vh 34%;

}

.headline {
    width: 50%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;

    img {
        width: 20%;
        // height: 100%;
        margin: 20px;
    }
}
</style>

<style>
.router-link-active {
    text-decoration: none;
}

a {
    text-decoration: none;
}
</style>